<template>
  <div class="no-close" id="app-nav-bottom-template">
    <tabset v-ref:tabs :close="false">
      <tab header="<button type='button' name='button' class='nav-img-btn img-ajzt'>安检员状态</button>">
        <phone-state ro='inspect'></phone-state>
      </tab>
      <tab header="<button type='button' name='button' class='nav-img-btn img-ajjh'>安检计划</button>">
        <check-page></check-page>
      </tab>
      <tab header="<button type='button' name='button' class='nav-img-btn img-xtsz'>系统设置</button>">
        <system-setting></system-setting>
      </tab>
      <tab header="<button type='button' name='button' class='nav-img-btn img-tzgg'>通知公告</button>">
        <check-notice></check-notice>
      </tab>
      <tab header="<button type='button' name='button' class='nav-img-btn img-txl'>通讯录</button>">
        <phone-book></phone-book>
      </tab>
    </tabset>
  </div>
</template>

<script scoped>
export default {
  title: '底部导航'
}
</script>
<style>
/* 底部按钮样式，重复四次 */
  .nav-img-btn {
    background: #FFF;
    border: none;
    width: 100%;
    height: 100%;
    background: #ECECEC;
    outline: none;
    padding-bottom: 10px;
  }
  li.active .nav-img-btn{
    color: #72BE40;
  }
  /*安检员状态*/
    .img-ajzt::before {
      content: '';
      display: block;
      background-image: url('../../../assets/手机状态.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 35%;
      height: 40px;
    }
    li.active .img-ajzt::before {
      background-size: 40%;
      background-image: url('../../../assets/手机状态-hover.png');
    }
    /*安检计划*/
    .img-ajjh::before {
      content: '';
      display: block;
      background-image: url('../../../assets/安检计划.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 35%;
      height: 40px;
    }
    li.active .img-ajjh::before {
      background-size: 40%;
      background-image: url('../../../assets/安检计划-hover.png');
    }
    /*系统设置*/
    .img-xtsz::before {
      content: '';
      display: block;
      background-image: url('../../../assets/系统设置.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 35%;
      height: 40px;
    }
    li.active .img-xtsz::before {
      background-size: 40%;
      background-image: url('../../../assets/系统设置-hover.png');
    }
    /*通知公告*/
    .img-tzgg::before {
      content: '';
      display: block;
      background-image: url('../../../assets/通知公告.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 35%;
      height: 40px;
    }
    li.active .img-tzgg::before {
      background-size: 40%;
      background-image: url('../../../assets/通知公告-hover.png');
    }
    /*通讯录*/
    .img-txl::before {
      content: '';
      display: block;
      background-image: url('../../../assets/通讯录.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 35%;
      height: 40px;
    }
    li.active .img-txl::before {
      background-size: 40%;
      background-image: url('../../../assets/通讯录-hover.png');
    }
  /********************底部样式************************/
  #app-nav-bottom-template .tab-content {
    display: flex;
    flex-direction: column;
  }
  #app-nav-bottom-template .tab-content > .tab-pane {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    overflow-x: hidden;
  }
  #app-nav-bottom-template .nav-tabs {
    height: 70px;
  }
  #app-nav-bottom-template .nav-tabs a {
    padding: 0px;
  }
  #app-nav-bottom-template h1 {
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
  }
  #app-nav-bottom-template > .flex {
    flex-direction: column-reverse;
  }
  #app-nav-bottom-template ul[role=tablist] {
    background: #ECECEC;
    display: flex;
  }
  #app-nav-bottom-template ul[role=tablist] > li {
    flex: 1;
    margin-bottom: 0px;
    overflow: hidden;
  }
  #app-nav-bottom-template ul[role=tablist] > li > a {
    border-bottom: none;
    margin: 0px;
  }
  #app-nav-bottom-template .tab-content > .tab-pane {
    padding-top: 0px;
  }
</style>
